<template>
	<view class="content padding-about-34 padding-about-24">
		<view class="view">
			<!-- @click="chooseMedia()" -->
			<button hover-class="none" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="border-bottom: 1rpx #F5F5F5 solid;padding: 0 0 25rpx 0;"
				class=" display-flex space-between align-items">
				<view class="font-size-26">
					修改头像
				</view>
				<view class="display-flex alig">
					<image :src="userinfo.headimg" style="width: 88rpx;height: 88rpx;" class="border-radius"
						mode="aspectFill">
					</image>
					<uv-icon name="arrow-right" color="#000000" size="18"></uv-icon>
				</view>
			</button>
			<!-- <button class="select-avatar" >
			          <image class="avatar" src="{{avatar}}" wx:if="{{avatar}}" />
			          <view class="select-btn" wx:else>
			            <van-icon name="plus" />
			            添加图片
			          </view>
			        </button> -->
			<view style="padding: 25rpx 0;border-bottom: 1rpx #F5F5F5 solid;"
				class=" display-flex space-between align-items">
				<view class="font-size-26">
					昵称
				</view>
				<input @blur="blur" id="nickname" type="nickname" v-model="userinfo.nickname"
					class="font-size-26 file-1 text-right" placeholder="请输入用户姓名" />
			</view>
			<view style="padding: 10rpx 0;border-bottom: 1rpx #F5F5F5 solid;"
				class=" display-flex space-between align-items">
				<view class="font-size-26">
					手机号
				</view>
				<view class="display-flex align-items ">
					<input type="text" disabled v-model="userinfo.phone" class="font-size-26 file-1 text-right"
						placeholder="请输入用户姓名" />
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="font-size-28 margin-left-20"
						style="margin: 0;padding: 0; width: 180rpx;color: #FE8623;">获取手机号</button>
				</view>
			</view>
			<view style="padding: 25rpx 0;border-bottom: 1rpx #F5F5F5 solid;"
				class=" display-flex space-between align-items">
				<view class="font-size-26">
					微信号
				</view>
				<input @blur="blur" type="text" id="wx_account" v-model="userinfo.wx_account"
					class="font-size-26 file-1 text-right" placeholder="请输入微信号" />
			</view>
			<view style="padding: 25rpx 0;border-bottom: 1rpx #F5F5F5 solid;"
				class=" display-flex space-between align-items">
				<view class="font-size-26">
					会员编号
				</view>
				<input type="text" disabled v-model="userinfo.id" class="font-size-26 file-1 text-right"
					placeholder="请输入用户姓名" />
			</view>

			<view style="padding: 25rpx 0;" class=" display-flex space-between align-items">
				<view class="font-size-26">
					加入时间
				</view>
				<input type="text" disabled v-model="userinfo.create_time" class="font-size-26 file-1 text-right"
					placeholder="请输入用户姓名" />
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const userinfo = ref(local.get('userinfo'))
	onLoad(function(option) {});
	async function getuserinfo() {
		const {
			code,
			data
		} = await api.getuserinfo()
		if (code == 0) {
			local.set('userinfo', data)
		}
	}

	function blur(event) {
		console.log(event);
		setUser(event.target.id, event.detail.value)
	}
	function onChooseAvatar(event){
		console.log(event);
		uploadFilePromise(event.detail.avatarUrl)
	}
	/**
	 * 修改头像
	 */
	async function chooseMedia() {
		const {
			errMsg,
			tempFiles
		} = await uni.chooseMedia({
			mediaType: ['image'],
			count: 1, //默认9
		})
		console.log(tempFiles);
		if (errMsg == 'chooseMedia:ok') {
			uploadFilePromise(tempFiles[0].tempFilePath)
		}
	}
	/**获取手机号 */
	async function getPhoneNumber(e) {
		const ret = await uni.login()
		if (ret.errMsg == 'login:ok') {
			if (e.detail.code) {
				let objrct = {
					code: ret.code,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}
				const {
					code,
					data
				} = await api.getWxPhone(objrct)
				if (code == 0) {
					userinfo.value.phone = data.phone
					setUser('phone', data.phone)
				}
			}
		}

	}
	/**
	 * @param {Object} url上传  路径
	 * 上传头像
	 */
	async function uploadFilePromise(url) {
		const {
			code,
			data
		} = await api.uploadFile(url)
		if (code == 0) {
			userinfo.value.headimg = data.image
			setUser('headimg', data.image)
		}
	}
	async function setUser(field, value) {
		let object = {
			field,
			value
		}
		const {
			code,
			data
		} = await api.setUser(object)
		if (code == 0) {
			nativeUI('更新成功！')
			getuserinfo()
		}
	}
	onShow(function() {});
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
	}
</style>